<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- General Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    /**
     * Draws diagram (a): Rope starting to slide.
     * @param {CanvasRenderingContext2D} ctx The canvas rendering context.
     */
    function drawDiagramA(ctx) {
        const cx = 150; // x-coordinate of the table corner
        const cy = 100; // y-coordinate of the table corner

        // 1. Draw the table edge
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(cx - 130, cy);
        ctx.lineTo(cx, cy);
        ctx.lineTo(cx, cy + 200);
        ctx.stroke();

        // 2. Draw the rope
        const ropeThickness = 4;
        const ropeHorzLen = 110;
        const ropeVertLen = 25;
        ctx.beginPath();
        ctx.lineWidth = 1.5;

        // Inner line of the rope (sharp corner, flush with table edge)
        ctx.moveTo(cx - ropeHorzLen, cy);
        ctx.lineTo(cx, cy);
        ctx.lineTo(cx, cy + ropeVertLen);

        // Outer line of the rope (rounded corner)
        ctx.moveTo(cx - ropeHorzLen, cy - ropeThickness);
        ctx.lineTo(cx, cy - ropeThickness); // Horizontal part
        ctx.arc(cx, cy, ropeThickness, -Math.PI / 2, 0); // Rounded corner
        // Arc ends at (cx + ropeThickness, cy)
        ctx.lineTo(cx + ropeThickness, cy + ropeVertLen); // Vertical part
        ctx.stroke();

        // 3. Draw the label "L"
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.fillText("L", cx - ropeHorzLen / 2, cy - 20);

        // 4. Draw the label "(a)"
        ctx.font = "24px 'Times New Roman'";
        ctx.fillText("(a)", cx, cy + 250);
    }

    /**
     * Draws diagram (b): Rope sliding off.
     * @param {CanvasRenderingContext2D} ctx The canvas rendering context.
     */
    function drawDiagramB(ctx) {
        const cx = 450; // x-coordinate of the table corner
        const cy = 100; // y-coordinate of the table corner

        // 1. Draw the table edge
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(cx - 130, cy);
        ctx.lineTo(cx, cy);
        ctx.lineTo(cx, cy + 200);
        ctx.stroke();

        // 2. Draw the rope
        const ropeThickness = 4;
        const ropeHorzLen = 60;
        const ropeVertLen = 140;
        ctx.beginPath();
        ctx.lineWidth = 1.5;

        // In diagram (b), both lines have sharp corners, forming parallel L-shapes.
        // The rope's inner corner is at the table's corner.
        // Inner L-shape
        ctx.moveTo(cx - ropeHorzLen, cy);
        ctx.lineTo(cx, cy);
        ctx.lineTo(cx, cy + ropeVertLen);

        // Outer L-shape (parallel to the inner one)
        ctx.moveTo(cx - ropeHorzLen, cy - ropeThickness);
        ctx.lineTo(cx - ropeThickness, cy - ropeThickness);
        ctx.lineTo(cx - ropeThickness, cy + ropeVertLen);
        ctx.stroke();

        // 3. Draw the label "L" and the arrow
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.textAlign = 'left';
        ctx.fillText("L", cx + 20, cy + 80);

        // Draw arrow indicating motion
        const arrowX = cx + 45;
        const arrowY_start = cy + 90;
        const arrowY_end = cy + 120;
        const headlen = 8;
        
        // Arrow shaft
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        ctx.moveTo(arrowX, arrowY_start);
        ctx.lineTo(arrowX, arrowY_end);
        ctx.stroke();
        
        // Arrow head (filled triangle)
        ctx.beginPath();
        ctx.moveTo(arrowX, arrowY_end);
        ctx.lineTo(arrowX - headlen / 2, arrowY_end - headlen);
        ctx.lineTo(arrowX + headlen / 2, arrowY_end - headlen);
        ctx.closePath();
        ctx.fill();

        // 4. Draw the label "(b)"
        ctx.font = "24px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.fillText("(b)", cx, cy + 250);
    }

    // Execute drawing functions
    drawDiagramA(ctx);
    drawDiagramB(ctx);

</script>
</body>
</html>